<!-- TableColumn.vue -->
<template>
  <!-- 过滤掉 children 属性，避免传递给 el-table-column -->
  <el-table-column v-bind="filteredColumnHeader">
    <template v-for="(item, index) in columnHeader.children" :key="index">
      <TableColumn v-if="item.children && item.children.length" :column-header="item" />
      <el-table-column v-else v-bind="item"> </el-table-column>
    </template>
  </el-table-column>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  columnHeader: {
    type: Object,
    required: true
  }
});

// 过滤掉 children 属性
const filteredColumnHeader = computed(() => {
  const { children, ...rest } = props.columnHeader;
  return rest;
});
</script>
